<template>

  <view>
    <view class="custom-center-popup">
      <u-popup :show="isAdd" :round="20" mode="center" :overlay="true" :closeable="false" :closeOnClickOverlay="false"
        @close="closeAdd">
        <view class="remark-view">
          <view style="" class="popup-title">
            {{popupTitle||''}}
          </view>
          <bx-form serviceName="srvdev_device_loudspeaker_add" type="add" @on-submit="addClassifySuccess"
            @cancel="isAdd=false" @cols-v2-loaded="v2Loaded">
          </bx-form>
        </view>
      </u-popup>

      <u-popup :show="isEdit" :round="20" mode="center" :overlay="true" :closeable="false" :closeOnClickOverlay="false"
        @close="isEdit = false">
        <view class="remark-view">
          <view style="" class="popup-title">
            {{popupTitle||''}}
          </view>
          <bx-form serviceName="srvdev_device_loudspeaker_add" :pk="pk" type="update" @on-submit="update2"
            @cancel="isEdit=false" @cols-v2-loaded="v2Loaded">
          </bx-form>
        </view>
      </u-popup>

      <!-- 	/**
			 * @description 通用表单组件
			 * @property {String} serviceName 服务名
			 * @property {String} pk 主键字段的值编辑、详情状态需要
			 * @property {String} pkCol 主键字段 编辑、详情状态需要
			 * @property {String} type=[add|update|detail] 组件状态 添加、编辑、详情
			 * @event {Function} on-submit 提交成功后的回调
			 */ -->
    </view>

    <bx-page headerLeft="请选择云喇叭进行编辑" title="云喇叭设备管理">
      <template #content>
        <o-row gutter="10">
          <o-col v-for="(item,index) in list" span="8" @click="editItem(item.id)">

            <view class="menu-tow-box noAdd">
              <!--    <view class="parent-jx" :class="{
                'bg-red':item.online_state == '在线异常',
                'bg-green':item.online_state == '在线'
              }">
                <text v-if="item.online_state!=='未知'"> {{item.online_state}}</text>
              </view> -->

              <view class="top-content">

                <view class="left-content">
                  <image class="center-image" src="/static/images/setup/cloudTrumpet/static/musicBox.png" />
                </view>
                <view class="right-content">
                  <view style="margin-bottom: 1.2rem;" class="item-font">
                    {{item.device_name}}
                  </view>
                  <view class="item-font">
                    {{item.loudspeaker_type}}/{{item.sn}}
                  </view>
                  <view class="item-font">
                    <!-- 	收银：收银喇叭配置 -->
                  </view>

                </view>
              </view>
              <view class="bottom-content" @click.stop="handleTrumpet(item)">
                <view class="left" @click.stop="changeChecked(item,index)">
                  <text class="cuIcon-roundcheckfill radio checked" v-if="item.checked "></text>
                  <text class="cuIcon-round radio" v-else></text>
                  <text class="margin-left" v-if="item.checked">默认设备</text>
                  <text class="margin-left" v-else>设为默认</text>
                </view>
                <view class="text">点击操作</view>
              </view>
              <!--      <view @click.stop="handleTrumpet(item)" class="bottom-content">
                <view class="text">点击操作</view>
              </view> -->


            </view>

          </o-col>



          <o-col span="8">

            <view @click="gotoAdd" class="menu-add-box">


              <view class="top-content">
                <view class="relative-box">
                  <image class="center-image" src="/static/images/setup/cloudTrumpet/static/musicBox.png" />
                  <!-- <image class="addIcon" src="/static/images/setup/cloudTrumpet/static/addIcon.png" /> -->
                </view>



              </view>

              <view class="bottom-content">
                <view class="text">添加云喇叭</view>
              </view>


            </view>

          </o-col>
        </o-row>
      </template>
    </bx-page>


    <view class="custom-center-popup">
      <u-popup :show="isHandle" :round="20" mode="center" :overlay="true" :closeable="false" :closeOnClickOverlay="true"
        @close="isHandle = false">
        <view class="remark-view" v-if="curItem">
          <view class="popup-title flex justify-between">
            <text>操作</text>
            <!-- <text @click="editItem(curItem.id)" class="text-green" v-if="curItem">编辑云喇叭</text> -->
          </view>
          <view class="content-box2">
            <!--       <view class="firt-row">
              <view class="base-font" v-if="curItem">基本信息</view>
              <view @click="editItem(curItem.id)" class="base-edit" v-if="curItem">编辑云喇叭</view>
            </view> -->
            <view class="banner">
              <!--     <view class="parent-jx" :class="{
                'bg-red':curItem.online_state == '在线异常',
                'bg-green':curItem.online_state == '在线'
              }">
        
                {{curItem.online_state}}
              </view> -->
              <view class="left">
                <image class="center-image" src='/static/images/setup/cloudTrumpet/static/musicBox.png' />
              </view>
              <view class="right">
                <view style="margin-bottom:1.4rem;" class="text" v-if="curItem">
                  {{curItem.type_name}}
                </view>
                <view class="text" v-if="curItem">
                  <!-- {{curItem.device_state}} -->
                  {{curItem.loudspeaker_type}}/{{curItem.sn}}
                </view>
              </view>
            </view>

            <!--          <view class="bottom-content">
              <view>
                <u-button @click="editCloudsetUp" style="width: 80px;" text="打印设置"></u-button>
              </view>
            </view>
    -->
            <view class="buttons">
              <view style="display: flex;">
                <!--       <u-button @click="cancleOrder" style="width: 120px;margin-right: 2rem;" text="取消未打印订单">
                </u-button> -->
                <button class="button line-white margin-right" @click="editItem(curItem.id)">编辑云喇叭</button>
                <button class="button margin-right line-white" @click="deleteDevice(curItem.id)">删除云喇叭</button>
                <button class="button margin-right" @click="testDevice(curItem)">测试云喇叭</button>
                <!--    <u-button @click="deleteDevice(curItem.id)" style="width: 100px;margin-right: 20px;" text="删除云喇叭">
                </u-button> -->
                <!-- <u-button type="primary" style="width: 80px" text="打印测试单" @click="printTest"></u-button> -->
              </view>
            </view>
          </view>

        </view>
      </u-popup>
    </view>


  </view>

</template>

<script>
  export default {

    data() {
      return {
        isHandle: false,
        isAdd: false,
        isEdit: false,
        popupTitle: "",
        list: [],
        pk: null,
        curItem: null,
      }
    },
    methods: {
      async setDefaultDevice(id) {
        const url = `/retail/operate/srvdev_device_loudspeaker_defult_update`
        const req = [{
          "serviceName": "srvdev_device_loudspeaker_defult_update",
          "data": [{
            "whether_defult": "是"
          }],
          "condition": [{
            "colName": "id",
            "value": id,
            "ruleType": "eq"
          }]
        }, ]
        const res = await this.$http.post(url, req)
        if (res?.data?.state === 'SUCCESS') {
          return true
        } else {
          return false
        }
      },
      changeChecked(e, index) {
        if (e.checked === true) {
          return
        }
        uni.showModal({
          title: '提示',
          content: '是否将当前设备设为默认设备?',
          success: (res) => {
            if (res.confirm) {
              this.setDefaultDevice(e.id).then(() => {
                this.getList()
              })
            }
          }
        })
      },
      v2Loaded(e) {
        console.log(e);
        this.popupTitle = e?.service_view_name
      },

      editItem(pk) {
        this.pk = pk;
        this.isHandle = false
        this.isEdit = true;

      },
      testDevice(e) {
        console.log(e);
        const url = `/retail/operate/srvls_device_play`
        const req = [{
          "serviceName": "srvls_device_play",
          "data": [{
            "store_no": e.store_no,
            "sn": e.sn,
            "soundContent": "您已收款",
            "price": "1000.0",
            "payType": "ali_pay"
          }],
          "srvApp": "retail",
          "condition": [{
            "colName": "id",
            "value": e.id,
            "ruleType": "in"
          }]
        }]
        uni.showModal({
          title: '提示',
          content: '确认进行操作?',
          success: (e) => {
            if (e.confirm) {
              this.$http.post(url, req).then(res => {
                uni.showToast({
                  title: res.data.resultMessage,
                  icon: 'none'
                })
              })
            }
          }
        })

      },
      deleteDevice(id) {
        if (id) {
          const req = [{
            "serviceName": "srvdev_device_loudspeaker_delete",
            "condition": [{
              "colName": "id",
              "ruleType": "eq",
              "value": id
            }]
          }];
          this.isHandle = false;
          const url = "/retail/operate/srvdev_device_loudspeaker_delete";
          uni.showModal({
            title: '提示',
            content: '确认要删除该云喇叭',
            // showCancel: false,
            success: (res) => {
              if (res.confirm) {
                uni.showLoading({
                  title: '加载中'
                })
                this.$http.post(url, req).then(res => {
                  uni.hideLoading();
                  if (res?.data?.state === 'SUCCESS') {
                    uni.showToast({
                      title: '删除成功',
                      duration: 2000,
                      icon: 'none'
                    });
                  }
                  this.getList();
                }).catch(_ => {
                  uni.hideLoading()
                })
              }
            }
          })
        }
      },
      getList() {
        const url = `/retail/select/srvdev_device_loudspeaker_select?srvdev_device_loudspeaker_select`;

        const req = {
          "serviceName": "srvdev_device_loudspeaker_select",
          "colNames": ["*"],
          "condition": [],
          "relation_condition": {
            "relation": "AND",
            "data": []
          },
          // "page": {
          // 	"pageNo": 1,
          // 	"rownumber": 10
          // },
          "order": [],
          "draft": false,
          "query_source": "list_page"
        }


        this.$http.post(url, req).then(res => {
          if (res?.data?.state === 'SUCCESS') {
            console.log(res, "res--res--")
            // this.list = res.data.data;
            this.list = res.data.data.map(item => {
              item.checked = false;
              if (item.whether_defult === '是') {
                item.checked = true;
              }
              return item
            });
          }
          uni.hideLoading()
        }).catch(_ => {
          uni.hideLoading()
        })
      },
      handleTrumpet(e) {
        this.curItem = e
        this.isHandle = true
      },
      gotoAdd() {
        this.isAdd = true
      },
      addClassifySuccess() {
        console.log(this.isAdd, "this.isAdd");
        this.isAdd = false;
        this.getList();
      },
      update2() {
        this.isEdit = false;
        this.getList();
      },
      gotoAdd() {
        this.isAdd = true
      },
      closeAdd() {
        this.isAdd = false;
      },
      toPages(target) {
        if (target) {
          uni.navigateTo({
            url: target
          })
        }
      }
    },
    onLoad() {

      uni.showLoading({
        title: '加载中'
      });
      this.getList();
    }
  }
</script>

<style lang="scss" scoped>
  .center-image {
    width: 20rem;
    height: 20rem;
    padding: 3rem;
  }

  .background-image {
    width: 11rem;
    height: 5rem;

  }

  .noAdd {
    background: rgba(245, 245, 245, 1);
  }

  .bottom-content-box {
    background: rgba(245, 245, 245, 1);
    padding: 38px 41px;
    height: 100%;
    overflow: hidden;
  }

  .card-Item {
    cursor: pointer;
  }

  .feature-menu {
    // background-color: $retail-color-primary;
    // width: 100%;
    height: 100vh;

    width: calc(100vw - 0rem);
    // min-height: calc(100vh - 25rem); // height: 100vh;
    // width: calc(100vw - 20rem);
    // height: calc(100vh - 12rem);
    // padding: 0rem 6rem;
    // height: calc(100vh - 6rem);
    padding-top: 6rem;
    color: #333;
    // font-size: 18px;
    display: flex;
    background: rgba(255, 255, 255, 1);
    // flex-direction: row;
  }





  .relative-box {
    position: relative;

    .addIcon {
      position: absolute;
      width: 7rem;
      height: 9rem;
      left: 15rem;
      top: 13rem;
    }
  }


  .menu-tow-box {
    cursor: pointer;
  }

  .menu-add-box {
    border: 2px dashed rgba(166, 166, 166, 1);
    height: 30rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top-content {
      display: flex;

      justify-content: center;
    }

    .bottom-content {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 70px;


      .text {
        font-weight: 700;
        font-size: 3rem;
        color: rgba(56, 192, 158, 1);
      }
    }
  }

  .menu-card-item {
    display: flex;
    cursor: pointer;
  }

  .parent-jx {
    position: absolute;
    right: -3px;
    top: -1px;
    z-index: 10000;
    background-color: #999;
    color: #fff;
    width: 8rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 3rem;
    border-bottom-left-radius: 0;
    font-size: 2.4rem;

    &.bg-green {
      background-color: #38C09E;
    }

    &.bg-red {
      background-color: #FF5733;
    }

    // .small-font {

    //   z-index: 2000;
    //   position: absolute;
    //   width: 100%;
    //   top: 50%;
    //   left: 50%;
    //   margin-left: -19px;
    //   margin-top: -14px;
    //   font-size: 15px;
    //   font-weight: 400;
    //   color: white;
    // }



  }

  .content-box {
    padding: 3rem 3rem;
    display: flex;
    flex-direction: column;
    background: white;
    width: 100%;
    height: 100%;


    .title-top {
      display: flex;
      justify-content: space-between;
      padding: 60rpx 50rpx;

      .right-button {
        font-weight: 500;
      }

      .left-title {
        font-size: $retail-font-size-lg;

        font-weight: 700;
        color: #333333;
      }

    }

    .container {
      width: 100%;
      flex: 1;
      overflow-y: scroll;

      .menu-tow-box {
        border-radius: 4rpx;
        // box-shadow: 0px 1px 2px #666;
        position: relative;
        margin-bottom: 1.1rem;
        padding-top: 3rem;
        border-radius: 4px;
        position: relative;
        margin-bottom: 1.1rem;
        padding-top: 3rem;
        height: 30rem;
        padding: 3rem;
        box-sizing: border-box;

        .top-content {
          display: flex;

          .right-content {
            flex: 1;
            display: flex;
            padding-top: 4rem;
            flex-direction: column;
            overflow: hidden;
            // justify-content: space-between;

            .item-font {
              word-wrap: break-word;
              word-break: break-all;
              font-size: 2.7rem;
              font-weight: 500;

            }
          }
        }


        .bright-content {
          .menu-card-item {
            border-top: 1px solid #c8cdcf;
            border-bottom: 1px solid #c8cdcf;
            margin-bottom: 20px;
            border-radius: 4px;
            padding: 28rpx 102rpx;
            height: 252rpx;

            .right-content {
              padding-left: 60rpx;
              display: flex;
              align-items: center;
              height: 100%;
              font-size: $retail-font-size-lg;
              font-weight: 700;
            }
          }
        }

        .image-icon {
          width: 189rpx;
          height: 192rpx;
        }

        .bottom-content {
          width: 100%;
          // padding: 0 4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;

          .left {
            font-size: 2.4rem;
            display: flex;
            align-items: center;

            .radio {
              font-size: 4rem;
              color: #999;

              &.checked {
                color: #38C09E;
              }
            }
          }

          .text {
            font-weight: 700;
            font-size: 3rem;
            color: rgba(56, 192, 158, 1);
          }
        }
      }

    }


  }

  .content-box2 {

    padding: 5rem 4rem;
    padding-top: 0;

    .firt-row {
      display: flex;
      font-size: 2.4rem;
      justify-content: space-between;

      .base-font {
        font-size: 2.4rem;
      }

      .base-edit {
        font-size: 2.4rem;
        color: blue;
      }
    }

    .banner {
      background: rgba(245, 245, 245, 1);
      border-radius: 6px;
      margin-top: 3rem;
      display: flex;
      position: relative;

      .left {
        display: flex;
        // flex: 3;
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;


        .text {
          font-size: 3rem;
        }

      }
    }

    .bottom-content {
      display: flex;
      width: 100%;
      flex-direction: row-reverse;
      margin-top: 10px;
    }

    .buttons {
      display: flex;
      flex-direction: row-reverse;
      margin-top: 3rem;
    }
  }

  .remark-view {
    min-width: 50vw;

    ::v-deep .form-wrapper {
      max-height: 70vh;
      overflow-y: scroll;
      padding-top: 0;
    }
  }
</style>
